<template>
  <div class="relative">

    <!-- 随机萌点 -->
    <div id="moe-container"></div>

    <div class="container mx-auto px-4 md:px-8 py-8 max-w-4xl">
      <!-- 头部 -->
      <header class="anime-border anime-bg p-6 md:p-8 mb-8 rounded-lg flex flex-col md:flex-row items-center">
        <div class="relative mb-4 md:mb-0 md:mr-8">
          <img src="/src/assets/img/1.jpg" alt="头像" class="header-image rounded-full" style="width: 200px; height: 200px;">
          <div class="absolute -bottom-6 -right-6 bg-pink-500 text-white rounded-full w-16 h-16 flex items-center justify-center shadow-xl">
            <i class="fas fa-heart text-2xl"></i>
          </div>
        </div>
        <div class="text-center md:text-left">
          <h1 class="text-3xl md:text-4xl font-bold text-pink-700 mb-2">御坂美琴</h1>
          <p class="text-lg md:text-xl text-pink-600 mb-4">超电磁炮/Level 5能力者</p>
          <div class="flex flex-col md:flex-row justify-center md:justify-start space-y-2 md:space-y-0 md:space-x-4">
            <a href="#" class="anime-btn px-4 py-2 rounded-full flex items-center justify-center">
              <i class="fas fa-envelope mr-2"></i> 0502@ybmq.jp
            </a>
          </div>
        </div>
      </header>

      <!-- 自我介绍 -->
      <section class="anime-border bg-white p-4 md:p-6 mb-8 rounded-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 bg-pink-500 text-white px-3 py-1 rounded-bl-lg" 
        style="font-size: 1.5rem; font-weight: bold;">
         <i class="fas fa-star mr-1"></i> 自我介绍
       </div>
        <div class="speech-bubble mt-6 md:mt-0">
          <p class="text-base md:text-lg">こんにちは！我是学园都市排名第三的Level 5超能力者御坂美琴！</p>
          <p class="text-sm md:text-base">擅长使用电磁力操纵各种电子设备，最拿手的是发射超电磁炮（Railgun）！</p>
          <p class="text-sm md:text-base">虽然平时看起来有点男孩子气，但其实我也是会害羞的！</p>
          <p class="text-pink-500 font-bold text-sm md:text-base">"そんな装備で大丈夫か？"</p>
        </div>
        <div class="flex flex-wrap justify-between mt-4">
          <div class="w-full md:w-1/3 p-1 md:p-2">
            <div class="anime-card p-3 md:p-4 rounded-lg text-center">
              <div class="text-pink-500 text-2xl md:text-3xl mb-2">
                <i class="fas fa-bolt"></i>
              </div>
              <h3 class="font-bold text-sm md:text-base">超电磁炮</h3>
              <p class="text-xs md:text-sm">50米射程，初速1030m/s</p>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-1 md:p-2">
            <div class="anime-card p-3 md:p-4 rounded-lg text-center">
              <div class="text-pink-500 text-2xl md:text-3xl mb-2">
                <i class="fas fa-shield-alt"></i>
              </div>
              <h3 class="font-bold text-sm md:text-base">电磁屏障</h3>
              <p class="text-xs md:text-sm">防御等级A+</p>
            </div>
          </div>
          <div class="w-full md:w-1/3 p-1 md:p-2">
            <div class="anime-card p-3 md:p-4 rounded-lg text-center">
              <div class="text-pink-500 text-2xl md:text-3xl mb-2">
                <i class="fas fa-brain"></i>
              </div>
              <h3 class="font-bold text-sm md:text-base">黑客能力</h3>
              <p class="text-xs md:text-sm">电子设备操控专家</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 技能 -->
      <section class="anime-border bg-white p-4 md:p-6 mb-8 rounded-lg relative overflow-hidden">
        <h2 class="text-xl md:text-2xl font-bold text-pink-700 mb-4">我的能力面板</h2>

        <div class="mb-4">
          <div class="flex justify-between mb-1 text-sm md:text-base">
            <span>超电磁炮威力</span>
            <span>98%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" :style="{ width: '98%' }"></div>
          </div>
        </div>

        <div class="mb-4">
          <div class="flex justify-between mb-1 text-sm md:text-base">
            <span>电磁屏障强度</span>
            <span>95%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" :style="{ width: '95%' }"></div>
          </div>
        </div>

        <div class="mb-4">
          <div class="flex justify-between mb-1 text-sm md:text-base">
            <span>电子设备操控</span>
            <span>90%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" :style="{ width: '90%' }"></div>
          </div>
        </div>

        <div class="mb-4">
          <div class="flex justify-between mb-1 text-sm md:text-base">
            <span>近战格斗</span>
            <span>85%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" :style="{ width: '85%' }"></div>
          </div>
        </div>

        <div class="mb-4">
          <div class="flex justify-between mb-1 text-sm md:text-base">
            <span>傲娇指数</span>
            <span>100%</span>
          </div>
          <div class="skill-bar">
            <div class="skill-progress" :style="{ width: '100%' }"></div>
          </div>
        </div>
      </section>

      <!-- 经历 -->
      <section class="anime-border bg-white p-4 md:p-6 mb-8 rounded-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 bg-pink-500 text-white px-3 py-1 rounded-bl-lg" 
        style="font-size: 1.5rem; font-weight: bold;">
        <i class="fas fa-star mr-1"></i> 经历
        </div>
        <h2 class="text-xl md:text-2xl font-bold text-pink-700 mb-4">我的冒险历程</h2>

        <div class="border-l-4 border-pink-500 pl-4 mb-6">
          <div class="anime-card p-3 md:p-4 rounded-lg mb-4">
            <h3 class="font-bold text-base md:text-lg text-pink-600">常盘台中学 <span class="text-xs md:text-sm text-gray-500">2018-至今</span></h3>
            <p class="text-xs md:text-sm text-gray-600">学园都市名校，大小姐学校</p>
            <p class="mt-1 md:mt-2 text-xs md:text-sm">• 担任风纪委员（虽然不太情愿）</p>
            <p class="text-xs md:text-sm">• 多次阻止学园都市内的犯罪活动</p>
            <p class="text-xs md:text-sm">• 保持Level 5排名第三的成绩</p>
          </div>

          <div class="anime-card p-3 md:p-4 rounded-lg mb-4">
            <h3 class="font-bold text-base md:text-lg text-pink-600">绝对能力者进化计划 <span class="text-xs md:text-sm text-gray-500">2019</span></h3>
            <p class="text-xs md:text-sm text-gray-600">阻止了学园都市的黑暗实验</p>
            <p class="mt-1 md:mt-2 text-xs md:text-sm">• 摧毁了多个实验设施</p>
            <p class="text-xs md:text-sm">• 拯救了10031个御坂妹妹</p>
            <p class="text-xs md:text-sm">• 与一方通行展开激烈对决</p>
          </div>

          <div class="anime-card p-3 md:p-4 rounded-lg">
            <h3 class="font-bold text-base md:text-lg text-pink-600">大霸星祭 <span class="text-xs md:text-sm text-gray-500">2020</span></h3>
            <p class="text-xs md:text-sm text-gray-600">学园都市最大规模的活动</p>
            <p class="mt-1 md:mt-2 text-xs md:text-sm">• 代表常盘台中学参赛</p>
            <p class="text-xs md:text-sm">• 与上条当麻组队完成多项挑战</p>
            <p class="text-xs md:text-sm">• 揭露了暗部组织的阴谋</p>
          </div>
        </div>
      </section>

      <!-- 兴趣爱好 -->
      <section class="anime-border bg-white p-4 md:p-6 mb-8 rounded-lg relative overflow-hidden">
        <div class="absolute top-0 right-0 bg-pink-500 text-white px-3 py-1 rounded-bl-lg" 
        style="font-size: 1.5rem; font-weight: bold;">
        <i class="fas fa-star mr-1"></i> 萌点
         </div>
        <h2 class="text-xl md:text-2xl font-bold text-pink-700 mb-4">我的兴趣爱好</h2>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
          <div class="anime-card p-3 md:p-4 rounded-lg text-center">
            <div class="text-pink-500 text-2xl md:text-3xl mb-2">
              <i class="fas fa-tshirt"></i>
            </div>
            <h3 class="font-bold text-sm md:text-base">抛硬币</h3>
            <p class="text-xs md:text-sm">绝对领域防御和攻击</p>
          </div>

          <div class="anime-card p-3 md:p-4 rounded-lg text-center">
            <div class="text-pink-500 text-2xl md:text-3xl mb-2">
              <i class="fas fa-gamepad"></i>
            </div>
            <h3 class="font-bold text-sm md:text-base">街机游戏</h3>
            <p class="text-xs md:text-sm">抓娃娃机达人</p>
          </div>

          <div class="anime-card p-3 md:p-4 rounded-lg text-center">
            <div class="text-pink-500 text-2xl md:text-3xl mb-2">
              <i class="fas fa-cat"></i>
            </div>
            <h3 class="font-bold text-sm md:text-base">呱太</h3>
            <p class="text-xs md:text-sm">收集各种周边</p>
          </div>

          <div class="anime-card p-3 md:p-4 rounded-lg text-center">
            <div class="text-pink-500 text-2xl md:text-3xl mb-2">
              <i class="fas fa-coffee"></i>
            </div>
            <h3 class="font-bold text-sm md:text-base">穿搭自由</h3>
            <p class="text-xs md:text-sm">优雅永不过时</p>
          </div>
        </div>
      </section>

      <!-- 联系我 -->
      <section class="anime-border anime-bg p-4 md:p-6 rounded-lg text-center dibu">
        <h2 class="text-xl md:text-2xl font-bold text-pink-700 mb-4">想要和我组队吗？</h2>
        <p class="mb-4 md:mb-6 text-sm md:text-base">如果你也在学园都市，或者想对抗暗部组织，欢迎联系我！</p>
        <a href="https://github.com/li0802/vue-project" class="anime-btn px-4 py-2 md:px-6 md:py-3 rounded-full text-sm md:text-lg inline-block">
          <i class="fas fa-paper-plane mr-2"></i> github仓库
        </a>
      </section>

      <!-- 页脚 -->
      <footer class="mt-6 md:mt-8 text-center text-gray-600 text-xs md:text-sm">
        <p>© 2025 御坂美琴 - 学园都市常盘台中学</p>
        <p class="mt-1">二次元浓度检测：<span class="text-pink-500 font-bold">100%</span> <i class="fas fa-heart text-pink-500"></i></p>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnimeResume',
  mounted() {
    // 随机生成萌点动画
    function createMoePoints() {
      const container = document.getElementById('moe-container');
      const colors = ['#ff6b9d', '#ff8e53', '#ffcc00', '#ff3366'];

      setInterval(() => {
        const moe = document.createElement('div');
        moe.className = 'moe-point';
        moe.style.left = Math.random() * 100 + 'vw';
        moe.style.top = Math.random() * 100 + 'vh';
        moe.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        moe.style.animationDelay = Math.random() + 's';

        container.appendChild(moe);

        // 动画结束后移除元素
        setTimeout(() => {
          moe.remove();
        }, 2000);
      }, 300);
    }

    // 为所有技能条添加动画
    const skillBars = document.querySelectorAll('.skill-progress');
    skillBars.forEach(bar => {
      const width = bar.style.width;
      bar.style.width = '0';
      setTimeout(() => {
        bar.style.width = width;
      }, 100);
    });

    // 添加点击特效
    document.addEventListener('click', (e) => {
      const x = e.clientX;
      const y = e.clientY;

      const spark = document.createElement('div');
      spark.className = 'moe-point';
      spark.style.left = x + 'px';
      spark.style.top = y + 'px';
      spark.style.backgroundColor = '#ff6b9d';
      spark.style.animation = 'moe 0.5s forwards';

      document.body.appendChild(spark);

      setTimeout(() => {
        spark.remove();
      }, 500);
    });

    createMoePoints();
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

body {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #fff5f5;
  color: #333;
  overflow-x: hidden;
}

.anime-border {
  border: 3px solid #ff6b9d;
  border-radius: 15px;
  box-shadow: 0 8px 15px rgba(255, 107, 157, 0.3);
  padding: 2rem;
}

.anime-bg {
  background: linear-gradient(135deg, #ffd6e7 0%, #ff9eb5 100%);
}

.anime-btn {
  background: linear-gradient(45deg, #ff6b9d, #ff8e53);
  color: white;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s;
  transform: translateY(0);
}

.anime-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 107, 157, 0.4);
}

.character {
  position: absolute;
  z-index: -1;
  opacity: 0.1;
}

.character-1 {
  top: 10%;
  left: 5%;
  transform: rotate(-10deg);
}

.character-2 {
  bottom: 10%;
  right: 5%;
  transform: rotate(10deg);
}

.skill-bar {
  height: 20px;
  border-radius: 10px;
  background-color: #ffe6ee;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(90deg, #ff6b9d, #ff8e53);
  border-radius: 10px;
  transition: width 1s ease-in-out;
}

.anime-card {
  transition: all 0.3s;
  background-color: white;
}

.anime-card:hover {
  transform: translateY(-5px);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(255, 107, 157, 0.3);
}

.moe-point {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ff6b9d;
  border-radius: 50%;
  opacity: 0;
  animation: moe 2s infinite;
}

.dibu {
  margin-top: 20px;
}

@keyframes moe {
  0% { transform: scale(0); opacity: 0; }
  50% { opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

.header-image {
  border-radius: 50%;
  border: 5px solid #ff6b9d;
  box-shadow: 0 0 0 5px #ffd6e7;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 5px #ffd6e7; }
  50% { box-shadow: 0 0 0 10px rgba(255, 107, 157, 0.5); }
  100% { box-shadow: 0 0 0 5px #ffd6e7; }
}

.relative {
  margin-top: 20px;
}

.speech-bubble {
  position: relative;
  background: white;
  border-radius: 15px;
  padding: 15px;
  margin: 20px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: white transparent;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-image {
    width: 100px;
    height: 100px;
  }

  .character {
    display: none;
  }

  .anime-btn {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
  }

  .flex-col-mobile {
    flex-direction: column;
  }

  .text-center-mobile {
    text-align: center;
  }

  .px-mobile {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .py-mobile {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .text-xl-mobile {
    font-size: 1.25rem;
  }

  .text-4xl-mobile {
    font-size: 2rem;
  }

  .grid-cols-2-mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-6-mobile {
    padding: 1.5rem;
  }

  .mb-8-mobile {
    margin-bottom: 2rem;
  }
}
</style>